<template>
  <div class="channel-edit">
    <!--我的频道-->
    <van-cell :border="false">
        <span slot="title" class="my-title">我的频道</span>
        <van-button type="danger" size="mini" round class="edit-btn" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid class="my-grid"  :border="false" :gutter="10">
      <van-grid-item 
      v-for="(item,index) in myChannels" 
      :key="item.id">
      <van-icon slot="icon" name="clear" class="closeBtn" v-show="isEdit" @click="deleteChannel(item.id,index)" />
      <span slot="text" class="text">{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <van-cell :border="false">
        <span slot="title" class="my-title">推荐频道</span>
    </van-cell>
    <van-grid class="hot-grid"  :border="false" :gutter="10">
      <van-grid-item 
      v-for="item in residueChannels" 
      :key="item.id" @click="addChannel(item)">
      <van-icon slot="icon" class="addBtn" name="plus" />
      <span slot="text" class="text">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
import { setItem } from '@/utils/storage.js'
import { mapState } from 'vuex'
export default {
  // 定义属性
  data() {
    return {
      isEdit:false,
      allChannels:[]
    }
  },
  props: {
    myChannels: {
      type:Array,
      required:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(['user']),
    // 剩余的推荐频道
    residueChannels () {
      return this.allChannels.filter(item => {
        const obj = this.myChannels.find(subItem => {
          return subItem.id === item.id
        })
        return obj === undefined
      })
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async loadAllChannels() {
      const { data } = await getAllChannels()
      this.allChannels = data.data.channels
    },
    async addChannel(item) {
      // 添加到我的频道
      this.myChannels.push(item)
      // 判断是否登录
      if (this.$store.state.user) {
        // 如果登录更新到数据库
        const { data } = await addChannel([
          {
            id:item.id,
            seq:this.myChannels.length
          }
        ])
        if (data.message === 'OK') {
          this.$toast('添加成功！')
        }
      } else {
        // 没有登录保存到本地
        setItem('myChannels', this.myChannels)
      }
    },
    async deleteChannel(id, index) {
      // 删除集合中的数据
      this.myChannels.splice(index, 1)
      if (this.user) {
        // 调用接口，删除数据
        const data = deleteChannel(id)
        console.log(data)
      } else {
        // 更新本地存储的频道
        setItem('myChannels', this.myChannels)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始化获取所有的频道
    this.loadAllChannels()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  .channel-edit{
      padding: 85px 24px 0px;
      .van-cell{
          padding: 0px;
          margin-bottom: 35px;
          .van-cell__title{
              text-align: left;
              color: #333;
              font-size: 32px;
          }
          .edit-btn{
              width: 110px;
              height: 50px;
              background-color: #ffffff;
              color: #F85959;
          }
      }
    .van-grid-item{
        width: 160px;
        height: 86px;
        position: relative;
    }
    .van-grid-item__content{
        flex-direction: row;
        background-color:#f4f5f6;
        border-radius:6px;
    }
    .van-grid-item__icon-wrapper{
        position:inherit;
    }
    .my-grid{
        margin-bottom: 75px;
        .closeBtn{
            position: absolute;
            top:0px;
            right:10px;
            font-size: 14px;
        }
        .text{
            font-size: 28px;
            color: #333333;
        }
    }
    .hot-grid{
        .addBtn{
            font-size: 28px;
        }
        .text{
            font-size: 28px;
            color: #333333;
        }
    }

  }
</style>